<template>
  <div class="reset_container">
    <el-form
      :model="form.data"
      status-icon
      :rules="rules"
      ref="form.data"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="学号" prop="number">
        <el-input v-model="form.data.number" placeholder="请输入学号" prefix-icon="el-icon-user" />
      </el-form-item>

      <el-form-item label="邮箱" prop="email">
        <el-input v-model="form.data.email" placeholder="请输入邮箱" prefix-icon="el-icon-receiving" />
      </el-form-item>

      <el-form-item label="密码" prop="password">
        <el-input
          type="password"
          v-model="form.data.password"
          placeholder="请输入密码"
          autocomplete="off"
        ></el-input>
      </el-form-item>

      <el-form-item label="确认密码" prop="checkPass">
        <el-input
          type="password"
          v-model="form.data.checkPass"
          placeholder="请确认密码"
          autocomplete="off"
        ></el-input>
      </el-form-item>

      <el-form-item label="验证码" prop="check">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-input
              v-model="form.data.check"
              placeholder="请输入验证码"
              prefix-icon="el-icon-circle-check"
            />
          </el-col>
          <el-col :span="5">
            <el-button @click="sendOut">发送验证码</el-button>
          </el-col>
        </el-row>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm('form.data')">提交</el-button>
        <el-button @click="return2">返回</el-button>
        <!-- resetForm('form.data') -->
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { reset, getcheck, resetpassword } from "@/api/login/reset.js";
import loginVue from './login.vue';
export default {
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.form.data.checkPass !== "") {
          this.$refs["form.data"].validateField("checkPass");
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.form.data.password) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      form: {
        type: "reset",
        data: {
          number: "316207010315",
          email: "2598343267@qq.com",
          password: "12345678",
          checkPass: "12345678",
          check: "",
        },
      },
      rules: {
        number: [
          { required: true, message: "请输入学号", trigger: "blur" },
          { min: 12, max: 12, message: "长度在12个数字", trigger: "blur" },
        ],
        email: [{ required: true, message: "请输入邮箱", trigger: "blur" }],
        password: [{ validator: validatePass, trigger: "blur" }],
        checkPass: [{ validator: validatePass2, trigger: "blur" }],
        check: [
          { required: true, message: "请输入验证", trigger: "blur" },
          { min: 4, max: 4, message: "长度在4个字符", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          resetpassword({
            type: "resetpassword",
            data: {
              number: this.form.data.number,
              password: this.form.data.password,
              check: this.form.data.check,
            },
          })
            .then((response) => {
              console.log(response);
            })
            .catch((error) => {
              console.log(error.data);
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    sendOut() {
      getcheck({
        type: "getcheck",
        data: {
          email: this.form.data.email,
        },
      })
        .then((response) => {
          console.log(response);
        })
        .catch((error) => {
          console.log(error.data);
        });
    },
    sendEmail() {
      reset({
        type: "reset",
        data: {
          email: this.form.data.email,
        },
      })
        .then((response) => {
          console.log(response);
        })
        .catch((error) => {
          console.log(error.data);
        });
    },
    return2(){
      this.$router.push("/login");
    }
  },
};
</script>

<style lang="scss" scoped>
.reset_container {
  background: url("../../assets/reset.jpg") no-repeat 0 0/cover;
  // background-color: lightblue;
  height: 100%;
}
 /deep/ .el-form-item__label {
    color: black  !important;
  }
  /deep/ .demo-ruleForm {
    width: 500px;
    margin-left: 450px;
    padding-top: 150px;
  }
</style>
<style>
  
</style>